<template>
	<view>
		<view class="swiperPanel" @touchstart="startMove" @touchend="endMove">
			<view v-for="(item, index) in swiperList" :key="index" :style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}" :class="itemStyle[index].class" >
				<view class="children">
					<image class="pic" :src="item.url"></image>
					<view class="a1">{{item.name}}</view>
					<view class="a2"><text>国画家</text></view>
					<view class="a3">一笔一世界</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			swiperList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				slideNote: {
					x: 0,
					y: 0
				},
				screenWidth: 0,
				itemStyle: []
			};
		},
		created() {
			var macInfo = uni.getSystemInfoSync();
			this.screenWidth = macInfo.screenWidth;
			// 计算swiper样式
			this.swiperList.forEach((item, index) => {
				this.itemStyle.push(this.getStyle(index))
			})
		},
		methods: {
			getStyle(e) {
				if (e > this.swiperList.length / 2) {
					var right = this.swiperList.length - e
					return {
						transform: 'scale(' + (1 - right / 5) + ') translate(-' + (right * 32) + '%,0px)',
						zIndex: 9999 - right,
						class:'swiperItem'
					}
				} else {
					return {
						transform: 'scale(' + (1 - e / 5) + ') translate(' + (e * 32) + '%,0px)',
						zIndex: 9999 - e,
						class:'swiperItem active'
					}
				}
			},
			startMove(e) {
				this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
				this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
			},
			endMove(e) {
				var newList = JSON.parse(JSON.stringify(this.itemStyle))
				if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
					// 向左滑动
					var last = [newList.pop()]
					newList = last.concat(newList)
				} else {
					// 向右滑动
					newList.push(newList[0])
					newList.splice(0, 1)
				}
				this.itemStyle = newList
			}
		}
	}
</script>

<style lang="scss">
	.swiperPanel {
		margin: 20rpx 0;background: #fff;
		height: 340rpx;
		width: 100%;

		position: relative;

		.swiperItem {
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			transition: all .5s;
			
			

			.children {
				height: 100%;text-align: center;
				width: 280rpx;background: #fff;padding: 30rpx;border-radius: 14rpx;
				margin: 2rpx auto;box-shadow: 0px 5px 10px 0px rgba(130, 130, 130, 0.12);

				.pic{height: 110rpx;width:110rpx;margin: 0 auto 6rpx;display: block;border-radius: 100%;}
				.a1{text-align: center;}
				.a2 text{background: #C6100E;color: #fff;border-radius: 50rpx;text-align: center;height: 50rpx;margin: 10rpx auto;line-height: 50rpx;display: inline-block;padding: 0 28rpx;font-size: 26rpx;}
				.a3{color: #999999;font-size: 26rpx;}
			}
		}
		.swiperItem.active .children{box-shadow: 0px 2px 50px 0px rgba(130, 130, 130, 0.12);}
		
	}
</style>
